FORM API integration

  • Steps

    STEP 1: Add http dependencies

    Open pubspec.yaml file and add the below lines of code

    
                        dependencies:
                            http: ^0.12.0+4   //add this line
                        

    STEP 2: install http dependencies

    'Get dependencies' is shown in the Adroid studio window. Click on it to install new dependencies

    STEP 3: import http in the dart file

    
                        import 'package:http/http.dart' as http;
                        

    STEP4 :API call

    
                        Future RegistrationUser()  async{
                              // url to registration php script
                              var APIURL = "https://protocoderspoint.com/php/registration.php";
    
                              //json maping user entered details
                              Map mapeddate ={
                                'name':_name.text,
                                'email':_email.text,
                                'phone':_phone.text,
                                'password':_password.text
                              };
                              //send  data using http post to our php code
                              http.Response reponse = await http.post(APIURL,body:mapeddate );
                              
                              //getting response from php code, here
                              var data = jsonDecode(reponse.body);
                              print("DATA: ${data}");
    
                            }
    
                          
    Complete code
    
                          import 'dart:convert';
    
                          import 'package:flutter/material.dart';
                          import 'InputDeco_design.dart';
                          import 'package:http/http.dart' as http;
    
    
                          class FormPage extends StatefulWidget {
                            @override
                            _FormPageState createState() => _FormPageState();
                          }
    
                          class _FormPageState extends State<FormPage> {
    
                            TextEditingController _name = TextEditingController();
                            TextEditingController _email = TextEditingController();
                            TextEditingController _phone = TextEditingController();
                            TextEditingController _password = TextEditingController();
                            TextEditingController _confirmpassword = TextEditingController();
    
                            final GlobalKey<FormState> _formkey = GlobalKey<FormState>();
    
    
                            @override
                            Widget build(BuildContext context) {
                              return Scaffold(
                                body: Center(
                                  child: SingleChildScrollView(
                                    child: Form(
                                      key: _formkey,
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          CircleAvatar(
                                            radius: 70,
                                            child: Image.network("https://protocoderspoint.com/wp-content/uploads/2020/10/PROTO-CODERS-POINT-LOGO-water-mark-.png"),
                                          ),
                                          SizedBox(
                                            height: 15,
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(bottom:15,left: 10,right: 10),
                                            child: TextFormField(
                                              controller: _name,
                                              keyboardType: TextInputType.text,
                                              decoration: buildInputDecoration(Icons.person,"Full Name"),
                                              validator: (String value){
                                                if(value.isEmpty)
                                                  {
                                                    return "Please enter name";
                                                  }
                                                return null;
                                              },
                                              onSaved: (String name){
    
                                              },
    
                                            ),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10),
                                            child: TextFormField(
                                              controller: _email,
                                              keyboardType: TextInputType.text,
                                              decoration:buildInputDecoration(Icons.email,"Email"),
                                              validator: (String value){
                                                if(value.isEmpty)
                                                {
                                                  return "Please enter  email";
                                                }
                                                if(!RegExp("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-z]").hasMatch(value))
                                                {
                                                  return "Please enter valid email";
                                                }
                                                return null;
                                              },
                                              onSaved: (String email){
    
                                              },
    
                                            ),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10),
                                            child: TextFormField(
                                              controller: _phone,
                                              keyboardType: TextInputType.number,
                                              decoration:buildInputDecoration(Icons.phone,"Phone No"),
                                              validator: (String value){
                                                if(value.isEmpty)
                                                {
                                                  return "Please enter  phone";
                                                }
                                                if(value.length < 9)
                                                {
                                                  return "Please enter valid phone";
                                                }
                                                return null;
                                              },
                                              onSaved: (String phone){
    
                                              },
                                            ),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10),
                                            child: TextFormField(
                                              controller: _password,
                                              keyboardType: TextInputType.text,
                                              decoration:buildInputDecoration(Icons.lock,"Password"),
                                              validator: (String value){
                                                if(value.isEmpty)
                                                {
                                                  return "Please enter password";
                                                }
    
                                                return null;
                                              },
    
                                            ),
                                          ),
                                          Padding(
                                            padding: const EdgeInsets.only(bottom: 15,left: 10,right: 10),
                                            child: TextFormField(
                                              controller: _confirmpassword,
                                              obscureText: true,
                                              keyboardType: TextInputType.text,
                                              decoration:buildInputDecoration(Icons.lock,"Confirm Password"),
                                              validator: (String value){
                                                if(value.isEmpty)
                                                {
                                                  return "Please enter re-password";
                                                }
                                                if(_password.text != _confirmpassword.text)
                                                {
                                                  return "Password Do not match";
                                                }
                                                return null;
                                              },
    
    
                                            ),
                                          ),
    
                                          SizedBox(
                                            width: 200,
                                            height: 50,
                                            child: RaisedButton(
                                              color: Colors.redAccent,
                                              onPressed: (){
    
                                                if(_formkey.currentState.validate())
                                                  {
                                                    RegistrationUser();
                                                    print("Successful");
                                                  }else
                                                    {
    
                                                      print("Unsuccessfull");
                                                    }
                                                
                                              },
                                              shape: RoundedRectangleBorder(
                                                  borderRadius: BorderRadius.circular(50.0),
                                                  side: BorderSide(color: Colors.blue,width: 2)
                                              ),
                                              textColor:Colors.white,child: Text("Submit"),
    
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }
    
                            Future RegistrationUser()  async{
                              // url to registration php script
                              var APIURL = "https://protocoderspoint.com/php/registration.php";
    
                              //json maping user entered details
                              Map mapeddate ={
                                'name':_name.text,
                                'email':_email.text,
                                'phone':_phone.text,
                                'password':_password.text
                              };
                              //send  data using http post to our php code
                              http.Response reponse = await http.post(APIURL,body:mapeddate );
    
                              //getting response from php code, here
                              var data = jsonDecode(reponse.body);
                              print("DATA: ${data}");
    
                            }
                          }